{extend name="public/layout" /}
{block name="head"}{/block}
{block name="body"}
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-sm-4 col-md-3 col-lg-2">
            <div class="card" id="left-menu" style="height:calc(100vh - 40px);overflow-y: auto;">
                <div class="card-header card-header-sm">
                    <h4>栏目分类</h4>
                    <ul class="card-actions">
                        <li>
                            <button type="button" onclick="doAction.initTree();">
                                <i class="mdi mdi-refresh"></i>
                            </button>
                        </li>
                    </ul>
                </div>
                <ul class="ztree" id="ztree" style="padding-bottom:20px;"></ul>
            </div>
        </div>
        <div class="col-sm-8 col-md-9 col-lg-10">
            <div class="card">
                <div class="card-header card-header-sm">
                    <form id="search-form" class="form-inline">
                        <input type="hidden" id="table-name" name="table_name" value="article"/>
                        <input type="hidden" id="class-id" name="class_id" value=""/>
                        <div class="form-group">
                            <input type="text" class="form-control" name="title" placeholder="请输入标题"/>
                        </div>
                        <button type="button" id="search-btn" onclick="helper.refreshTable()" class="btn btn-default">
                            <i class="mdi mdi-magnify"></i> 搜索
                        </button>
                    </form>
                </div>
                <div class="card-body p-lr-15">
                    <div class="toolbar">
                        <a href="javascript:void(0);" class="btn btn-default" onclick="doAction.add();"><i
                                class="mdi mdi-plus"></i> 添加</a>
                        <a href="javascript:void(0);" class="btn btn-default" onclick="doAction.del();"><i
                                class="mdi mdi-archive"></i> 删除</a>
                    </div>
                    <div class="table-responsive">
                        <table id="grid" class="table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    helper.bootstrapTable({
        url: '/system/cms.detail/index.html',
        columns: [
            {field: "checkbox", checkbox: true},
            {field: "id", title: "#", width: "60", sortable: true},
            {field: "title", title: "标题"},
            {field: "create_time", title: "添加日期", width: "180", sortable: true},
            {field: "update_time", title: "更新日期", width: "180", sortable: true},
            {
                field: "operate", title: "操作", width: "160",
                formatter: function (value, row, index) {
                    console.info(row);
                    var html = '';
                    html += '<a href="javascript:void(0);"  class="btn-xs btn btn-primary" onclick="doAction.edit(\'' + row.table_name + '\',' + row.id + ')">' +
                        '<i class="mdi mdi-pencil"></i> 编辑</a> ';
                    html += '<a href="javascript:void(0);"  class="btn-xs btn btn-danger" onclick="doAction.del(' + row.id + ')">' +
                        '<i class="mdi mdi-archive"></i> 删除</a> ';
                    return html;
                }
            },
        ]
    });
    var doAction = {
        initTree: function () {
            Do('ztree', function () {
                $.get('/system/cms.class/tree.html', function (nodes) {
                    $.fn.zTree.init($('#ztree'), {
                        data: {
                            view: {
                                dblClickExpand: false,
                                showLine: false
                            },
                            simpleData: {
                                enable: true,
                                idKey: "id",
                                pIdKey: "pid",
                                rootPId: 0
                            }
                        },
                        callback: {
                            onClick: function (event, treeId, treeNode) { //单击事件
                                $("#table-name").val(treeNode.table_name);
                                $("#class-id").val(treeNode.id);
                                helper.refreshTable();
                            }
                        }
                    }, nodes);
                    let zTree = $.fn.zTree.getZTreeObj("ztree");
                    zTree.expandAll(true);
                });
            });
        },
        add: function () {
            var tableName = $('#table-name').val();
            var classId = $('#class-id').val();
            helper.createTab({
                title: '添加内容',
                url: '/system/cms.detail/add.html?class_id=' + classId + '&table_name=' + tableName
            });
        },
        edit: function (tableName, id) {
            helper.createTab({
                title: '修改内容',
                url: '/system/cms.detail/edit.html?table_name=' + tableName + '&id=' + id
            });
        },
        del: function (id) {
            var tableName = $('#table-name').val();
            var ids = id;
            if (valid.isEmpty(id)) {
                ids = $.map($('#grid').bootstrapTable('getSelections'), function (row, index) {
                    return row.id;
                });
                if (ids.length == 0) {
                    layer.msg('请选择删除内容');
                    return false;
                }
                ids = ids.join(',');
            }
            layer.confirm("确认删除该内容吗?", {icon: 3}, function (index) {
                helper.getAjax({
                    url: "/system/cms.detail/del.html",
                    data: {id: ids, table_name: tableName},
                    success: function (res) {
                        if (res.code == 1) {
                            helper.refreshTable();
                        } else {
                            helper.tips(res.msg);
                        }
                    }
                });
                layer.close(index);
            });
        }
    };
    doAction.initTree();
</script>
</body>
{/block}